```html
<div style="max-width: 600px; margin: 0 auto; padding: 10px; font-family: Arial, sans-serif; box-sizing: border-box;">
  <!-- Search Function -->
  <div style="background: #f0f0f0; border: 1px solid #ccc; padding: 15px; margin-bottom: 20px; text-align: center;">
    <h2 style="margin: 0 0 10px 0; font-size: clamp(1.1em, 4vw, 1.3em);">Neopets Battlepedia - COM Food Cards</h2>
    <p style="margin: 0 0 10px 0; font-size: clamp(0.8em, 3vw, 1em);"><strong>PRESS CONTROL+F AND ENTER THE CARD YOU ARE LOOKING FOR</strong></p>
    <input type="text" id="searchInput" placeholder="Search for a card..." 
           style="width: 100%; padding: 10px; border: 1px solid #ccc; font-size: clamp(14px, 4vw, 16px); box-sizing: border-box;"
           onkeyup="searchCards()">
  </div>

  <div style="background: #fff3cd; border: 1px solid #ffeaa7; padding: 10px; margin-bottom: 20px; font-size: clamp(0.8em, 3vw, 0.9em);">
    <strong>Note:</strong> Even if this information came from the devs, they can and will change their opinions on such things.
  </div>
</div>

<div style="max-width: 600px; margin: 0 auto; padding: 10px; font-family: Arial, sans-serif; box-sizing: border-box;" data-card-name="exploding acorns">
  <!-- Exploding Acorns -->
  <div style="background: #f0f0f0; border: 1px solid #ccc; padding: 10px; text-align: center; margin-bottom: 10px;">
    <h2 style="margin: 0; font-size: clamp(1em, 4vw, 1.2em);">||Exploding Acorns||</h2>
  </div>

  <div style="text-align: center; margin-bottom: 10px;">
    <img src="IMAGE HERE" style="max-width: 100%; height: auto; border: 1px solid #ccc;" />
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Card ID#(s):</strong> COM-215 SR</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Card Type:</strong> Food</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Level Requirement:</strong></div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Rarity:</strong> SR</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Artist:</strong> kiRAWRa</div>
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>upperdeck.com Game Rules:</strong> When your opponent plays a card, if it was not the first card they played this turn, you may play this card. Negate that card's effect.</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>upperdeck.com Updates/FAQ:</strong></div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Other official rulings and speculation:</strong></div>
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Upperdeck.com link:</strong></div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Wayback Machine link:</strong> (Updated: 0/0/20XX)</div>
  </div>
</div>

<div style="max-width: 600px; margin: 0 auto; padding: 10px; font-family: Arial, sans-serif; box-sizing: border-box;" data-card-name="aquaberry">
  <!-- Aquaberry -->
  <div style="background: #f0f0f0; border: 1px solid #ccc; padding: 10px; text-align: center; margin-bottom: 10px;">
    <h2 style="margin: 0; font-size: clamp(1em, 4vw, 1.2em);">||Aquaberry||</h2>
  </div>

  <div style="text-align: center; margin-bottom: 10px;">
    <img src="IMAGE HERE" style="max-width: 100%; height: auto; border: 1px solid #ccc;" />
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Card ID#(s):</strong> COM-216 R</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Card Type:</strong> Food</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Level Requirement:</strong> 1</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Rarity:</strong> R</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Artist:</strong> Faro</div>
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>upperdeck.com Game Rules:</strong> Void any number of cards with "berry" in their name from your inventory. Remove a status effect from your Neopet. If you do, draw 1 card. Then for each "berry" voided by this card's effect, draw 1 card.</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>upperdeck.com Updates/FAQ:</strong> The controller of this card must choose to void additional cards as the first action of its effect and before taking any other actions on the card.</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Other official rulings and speculation:</strong></div>
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Upperdeck.com link:</strong> https://my.upperdeck.com/public/neopets/cards/809</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Wayback Machine link:</strong> (Updated: 0/0/20XX)</div>
  </div>
</div>

<div style="max-width: 600px; margin: 0 auto; padding: 10px; font-family: Arial, sans-serif; box-sizing: border-box;" data-card-name="chiaberry">
  <!-- Chiaberry -->
  <div style="background: #f0f0f0; border: 1px solid #ccc; padding: 10px; text-align: center; margin-bottom: 10px;">
    <h2 style="margin: 0; font-size: clamp(1em, 4vw, 1.2em);">||Chiaberry||</h2>
  </div>

  <div style="text-align: center; margin-bottom: 10px;">
    <img src="IMAGE HERE" style="max-width: 100%; height: auto; border: 1px solid #ccc;" />
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Card ID#(s):</strong> COM-217 R</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Card Type:</strong> Food</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Level Requirement:</strong> 1</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Rarity:</strong> R</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Artist:</strong> Momo Kariño</div>
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>upperdeck.com Game Rules:</strong> Void any number of cards with "berry" in their name from your inventory. Target Neopet's Attack becomes 4, Defence becomes 3, and Agility becomes 4 this turn. Then for each "berry" voided by this card's effect, increase or decrease any of these stats by 1.</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>upperdeck.com Updates/FAQ:</strong> The controller of this card must choose to void additional cards as the first action of its effect and before taking any other actions on the card. The Neopet targeted by this effect still applies any changes to their stats from Equipment or other effects, including those created by this card.</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Other official rulings and speculation:</strong></div>
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Upperdeck.com link:</strong> https://my.upperdeck.com/public/neopets/cards/810</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Wayback Machine link:</strong> (Updated: 0/0/20XX)</div>
  </div>
</div>

<div style="max-width: 600px; margin: 0 auto; padding: 10px; font-family: Arial, sans-serif; box-sizing: border-box;" data-card-name="conkerberry">
  <!-- Conkerberry -->
  <div style="background: #f0f0f0; border: 1px solid #ccc; padding: 10px; text-align: center; margin-bottom: 10px;">
    <h2 style="margin: 0; font-size: clamp(1em, 4vw, 1.2em);">||Conkerberry||</h2>
  </div>

  <div style="text-align: center; margin-bottom: 10px;">
    <img src="IMAGE HERE" style="max-width: 100%; height: auto; border: 1px solid #ccc;" />
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Card ID#(s):</strong> COM-218 R</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Card Type:</strong> Food</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Level Requirement:</strong> 1</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Rarity:</strong> R</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Artist:</strong> kiRAWRa</div>
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>upperdeck.com Game Rules:</strong> When your opponent activates the effect of their Neopet, you may play this card. Void any number of cards with "berry" in their name from your inventory. Negate that Neopet's effect and deal 1 damage to your opponent's Neopet. Then for each "berry" voided by this card's effect, deal 1 damage to your opponent's Neopet.</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>upperdeck.com Updates/FAQ:</strong> The controller of this card must choose to void additional cards as the first action of its effect and before taking any other actions on the card. Each time this effect is repeated, it is a separate instance.</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Other official rulings and speculation:</strong></div>
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Upperdeck.com link:</strong> https://my.upperdeck.com/public/neopets/cards/811</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Wayback Machine link:</strong> (Updated: 0/0/20XX)</div>
  </div>
</div>

<div style="max-width: 600px; margin: 0 auto; padding: 10px; font-family: Arial, sans-serif; box-sizing: border-box;" data-card-name="fishberry">
  <!-- Fishberry -->
  <div style="background: #f0f0f0; border: 1px solid #ccc; padding: 10px; text-align: center; margin-bottom: 10px;">
    <h2 style="margin: 0; font-size: clamp(1em, 4vw, 1.2em);">||Fishberry||</h2>
  </div>

  <div style="text-align: center; margin-bottom: 10px;">
    <img src="IMAGE HERE" style="max-width: 100%; height: auto; border: 1px solid #ccc;" />
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Card ID#(s):</strong></div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Card Type:</strong></div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Level Requirement:</strong></div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Rarity:</strong></div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Artist:</strong></div>
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>upperdeck.com Game Rules:</strong> Void any number of cards with "berry" in their name from your inventory. Target 1 card in either player's discard; place that card on the bottom of its owner's deck in any order. Then for each "berry" voided by this card's effect, repeat this effect.</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>upperdeck.com Updates/FAQ:</strong> The controller of this card must choose to void additional cards as the first action of its effect and before taking any other actions on the card.</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Other official rulings and speculation:</strong></div>
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Upperdeck.com link:</strong> https://my.upperdeck.com/public/neopets/cards/812</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Wayback Machine link:</strong> (Updated: 0/0/20XX)</div>
  </div>
</div>

<div style="max-width: 600px; margin: 0 auto; padding: 10px; font-family: Arial, sans-serif; box-sizing: border-box;" data-card-name="jumbleberry">
  <!-- Jumbleberry -->
  <div style="background: #f0f0f0; border: 1px solid #ccc; padding: 10px; text-align: center; margin-bottom: 10px;">
    <h2 style="margin: 0; font-size: clamp(1em, 4vw, 1.2em);">||Jumbleberry||</h2>
  </div>

  <div style="text-align: center; margin-bottom: 10px;">
    <img src="IMAGE HERE" style="max-width: 100%; height: auto; border: 1px solid #ccc;" />
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Card ID#(s):</strong> COM-220 R</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Card Type:</strong> Food</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Level Requirement:</strong> 1</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Rarity:</strong> R</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Artist:</strong> Ashley Cavan</div>
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>upperdeck.com Game Rules:</strong> Void any number of cards with "berry" in their name from your inventory. Increase or decrease the result of a die by 1. Then for each "berry" voided by this card's effect, repeat this effect.</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>upperdeck.com Updates/FAQ:</strong> The controller of this card must choose to void additional cards as the first action of its effect and before taking any other actions on the card. Each time this effect is repeated, it is a separate instance.</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Other official rulings and speculation:</strong></div>
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Upperdeck.com link:</strong> https://my.upperdeck.com/public/neopets/cards/813</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Wayback Machine link:</strong> (Updated: 0/0/20XX)</div>
  </div>
</div>

<div style="max-width: 600px; margin: 0 auto; padding: 10px; font-family: Arial, sans-serif; box-sizing: border-box;" data-card-name="sniddberry">
  <!-- Sniddberry -->
  <div style="background: #f0f0f0; border: 1px solid #ccc; padding: 10px; text-align: center; margin-bottom: 10px;">
    <h2 style="margin: 0; font-size: clamp(1em, 4vw, 1.2em);">||Sniddberry||</h2>
  </div>

  <div style="text-align: center; margin-bottom: 10px;">
    <img src="IMAGE HERE" style="max-width: 100%; height: auto; border: 1px solid #ccc;" />
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Card ID#(s):</strong> COM-221 SR</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Card Type:</strong> Food</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Level Requirement:</strong> 1</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Rarity:</strong> SR</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Artist:</strong> Ciara Slaton</div>
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>upperdeck.com Game Rules:</strong> Void any number of cards with "berry" in their name from your inventory. When a player would roll 1 or more dice, increase or decrease the number of dice rolled by 1. Then for each "berry" voided by this card's effect, repeat this effect.</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>upperdeck.com Updates/FAQ:</strong> The controller of this card must choose to void additional cards as the first action of its effect and before taking any other actions on the card. Each time this effect is repeated, it is a separate instance.</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Other official rulings and speculation:</strong></div>
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Upperdeck.com link:</strong> https://my.upperdeck.com/public/neopets/cards/814</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Wayback Machine link:</strong> (Updated: 0/0/20XX)</div>
  </div>
</div>

<div style="max-width: 600px; margin: 0 auto; padding: 10px; font-family: Arial, sans-serif; box-sizing: border-box;" data-card-name="darigan hot dog">
  <!-- Darigan Hot Dog -->
  <div style="background: #f0f0f0; border: 1px solid #ccc; padding: 10px; text-align: center; margin-bottom: 10px;">
    <h2 style="margin: 0; font-size: clamp(1em, 4vw, 1.2em);">||Darigan Hot Dog||</h2>
  </div>

  <div style="text-align: center; margin-bottom: 10px;">
    <img src="IMAGE HERE" style="max-width: 100%; height: auto; border: 1px solid #ccc;" />
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Card ID#(s):</strong> COM-222 R</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Card Type:</strong> Food</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Level Requirement:</strong> 2</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Rarity:</strong> R</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Artist:</strong> kiRAWRa</div>
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>upperdeck.com Game Rules:</strong> Discard 2 cards; draw up to 3 cards.</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>upperdeck.com Updates/FAQ:</strong></div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Other official rulings and speculation:</strong></div>
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Upperdeck.com link:</strong></div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Wayback Machine link:</strong> (Updated: 0/0/20XX)</div>
  </div>
</div>

<div style="max-width: 600px; margin: 0 auto; padding: 10px; font-family: Arial, sans-serif; box-sizing: border-box;" data-card-name="super juicy berry">
  <!-- Super Juicy Berry -->
  <div style="background: #f0f0f0; border: 1px solid #ccc; padding: 10px; text-align: center; margin-bottom: 10px;">
    <h2 style="margin: 0; font-size: clamp(1em, 4vw, 1.2em);">||Super Juicy Berry||</h2>
  </div>

  <div style="text-align: center; margin-bottom: 10px;">
    <img src="IMAGE HERE" style="max-width: 100%; height: auto; border: 1px solid #ccc;" />
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Card ID#(s):</strong> COM-223 R</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Card Type:</strong> Food</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Level Requirement:</strong> 2</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Rarity:</strong> R</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Artist:</strong></div>
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>upperdeck.com Game Rules:</strong> Void any number of cards with "berry" in their name from your inventory. Increase the result of a die by up to 2. Then for each "berry" voided by this card's effect, repeat this effect.</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>upperdeck.com Updates/FAQ:</strong> The controller of this card must choose to void additional cards as the first action of its effect and before taking any other actions on the card. Each time this effect is repeated, it is a separate instance.</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Other official rulings and speculation:</strong></div>
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Upperdeck.com link:</strong> https://my.upperdeck.com/public/neopets/cards/816</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Wayback Machine link:</strong> (Updated: 0/0/20XX)</div>
  </div>
</div>

<div style="max-width: 600px; margin: 0 auto; padding: 10px; font-family: Arial, sans-serif; box-sizing: border-box;" data-card-name="unguberry">
  <!-- Unguberry -->
  <div style="background: #f0f0f0; border: 1px solid #ccc; padding: 10px; text-align: center; margin-bottom: 10px;">
    <h2 style="margin: 0; font-size: clamp(1em, 4vw, 1.2em);">||Unguberry||</h2>
  </div>

  <div style="text-align: center; margin-bottom: 10px;">
    <img src="IMAGE HERE" style="max-width: 100%; height: auto; border: 1px solid #ccc;" />
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Card ID#(s):</strong> COM-224 R</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Card Type:</strong> Food</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Level Requirement:</strong> 2</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Rarity:</strong> R</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Artist:</strong> Ashley Cavan</div>
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>upperdeck.com Game Rules:</strong> Void any number of cards with "berry" in their name from your inventory. Decrease the result of a die by up to 2. Then for each "berry" voided by this card's effect, repeat this effect.</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>upperdeck.com Updates/FAQ:</strong> The controller of this card must choose to void additional cards as the first action of its effect and before taking any other actions on the card. Each time this effect is repeated, it is a separate instance.</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Other official rulings and speculation:</strong></div>
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Upperdeck.com link:</strong> https://my.upperdeck.com/public/neopets/cards/817</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Wayback Machine link:</strong> (Updated: 0/0/20XX)</div>
  </div>
</div>

<div style="max-width: 600px; margin: 0 auto; padding: 10px; font-family: Arial, sans-serif; box-sizing: border-box;" data-card-name="loveberry">
  <!-- Loveberry -->
  <div style="background: #f0f0f0; border: 1px solid #ccc; padding: 10px; text-align: center; margin-bottom: 10px;">
    <h2 style="margin: 0; font-size: clamp(1em, 4vw, 1.2em);">||Loveberry||</h2>
  </div>

  <div style="text-align: center; margin-bottom: 10px;">
    <img src="IMAGE HERE" style="max-width: 100%; height: auto; border: 1px solid #ccc;" />
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Card ID#(s):</strong> COM-225 R</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Card Type:</strong> Food</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Level Requirement:</strong> 3</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Rarity:</strong> R</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Artist:</strong> Ashley Cavan</div>
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>upperdeck.com Game Rules:</strong> Void any number of cards with "berry" in their name from your inventory. Heal 1 damage from your Neopet. Then for each "berry" voided by this card's effect, repeat this effect.</div>
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>upperdeck.com Updates/FAQ:</strong> The controller of this card must choose to void additional cards as the first action of its effect and before taking any other actions on the card. Each time this effect is repeated, it is a separate instance.</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Other official rulings and speculation</strong></div>
  </div>

  <div style="background: #f0f0f0; border: 1px solid #ccc;">
    <div style="padding: 8px; border-bottom: 1px solid #ccc; font-size: clamp(0.85em, 3vw, 1em);"><strong>Upperdeck.com link:</strong> https://my.upperdeck.com/public/neopets/cards/818</div>
    <div style="padding: 8px; font-size: clamp(0.85em, 3vw, 1em);"><strong>Wayback Machine link:</strong> (Updated: 0/0/20XX)</div>
  </div>
</div>